<template>
    <div class="paimai">
        <!--头部-->
        <Header/>
        <!--导航-->
        <Nav :selectedNum="navOptions.selectedNum" :autoShowCateNav="navOptions.autoShowCateNav"/>
        <!-- swiper -->
        <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) in swiperData" :key="index"
                          :style="`height:400px;background-image: url('${item.url}');`">
            </swiper-slide>
            <!-- Optional controls -->
            <!--前后按钮-->
            <!--<div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>-->
            <!--分页器-->
            <!--<div class="swiper-pagination" slot="pagination"></div>-->
        </swiper>
        <!--内容-->
        <div class="pai-content">
            <!--合作机构-->
            <PartnerCompany/>

            <transition name="el-fade-in-linear"><!--过渡动效-->
                <keep-alive><!--数据缓存-->
                    <router-view></router-view>
                </keep-alive>
            </transition>
        </div>
        <!--返回顶部-->
        <el-backtop :bottom="150" :right="200" title="返回顶部"></el-backtop>
        <!--尾部-->
        <Footer/>
    </div>
</template>

<script>
    import Header from "../../components/Header"
    import Nav from "../../components/Nav"
    import Footer from "../../components/Footer"
    import PartnerCompany from "../../components/pai/children/PartnerCompany"

    export default {
        name: "Home",
        components: {Header, Nav, Footer, PartnerCompany},
        data() {
            return {
                /*导航选项参数*/
                navOptions: {selectedNum: 0, autoShowCateNav: true},
                /*Swiper*/
                swiperOption: {
                    autoplay: true, // 自动轮播
                    loop: true,  // 无限轮播
                    /*按钮*/
                    /*navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }*/
                    /*分页器*/
                    /*pagination: {
                        el: '.swiper-pagination'
                    }*/
                },
                /*Swiper数据*/
                swiperData: [
                    {url: "https://gw.alicdn.com/tfs/TB1uWI6dHH1gK0jSZFwXXc7aXXa-2000-400.jpg"},
                    {url: "https://gw.alicdn.com/tfs/TB1KEHfhhD1gK0jSZFsXXbldVXa-2000-400.jpg"},
                    {url: "https://img.alicdn.com/tfs/TB1K3Y2wpzqK1RjSZFCXXbbxVXa-2000-400.jpg"},
                    {url: "https://gw.alicdn.com/tfs/TB1uWI6dHH1gK0jSZFwXXc7aXXa-2000-400.jpg"},
                    {url: "https://gw.alicdn.com/tfs/TB1KEHfhhD1gK0jSZFsXXbldVXa-2000-400.jpg"},
                ]
            }
        }
    }
</script>
<style lang="less" scoped>
    * {
        font: 12px/3.0 "Microsoft YaHei", tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }

    .paimai {
        .pai-content {
            margin-top: 50px;
        }
    }
</style>